<template>
  <div>
    <div class="box-card">
      <div class="box-header">
        <el-form :model="form" ref="form" label-width="80px">
          <el-row>
            <el-col :span="6">
              <el-form-item label="标签名称" prop="tags">
                <el-input placeholder="请输入" v-model="form.tags"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="城市" prop="provinces">
                <el-select
                  placeholder="请选择"
                  v-model="form.provinces"
                  @change="handleProvince"
                >
                  <el-option
                    v-for="item in citySelect.province"
                    :key="item"
                    :label="item"
                    :value="item"
                  ></el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="地区" prop="city">
                <el-select placeholder="请选择" v-model="form.city">
                  <el-option
                    v-for="item in citySelect.cityDate"
                    :key="item"
                    :label="item"
                    :value="item"
                  ></el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="企业简称" prop="shortName">
                <el-input v-model="form.shortName"></el-input>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="7">
              <el-form-item label="状态" prop="state">
                <el-select placeholder="请选择" v-model="form.state">
                  <el-option label="启用" :value="1"></el-option>
                  <el-option label="禁用" :value="0"></el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="14">
              <el-button class="header-btn" @click="clearInput">清空</el-button>
              <el-button type="primary" class="header-btn" @click="searchInput"
                >搜索</el-button
              >
            </el-col>
            <el-col :span="3">
              <el-button
                type="success"
                class="header-right"
                @click="openDialog('add')"
                ><i class="el-icon-edit"></i> 新增用户</el-button
              >
            </el-col>
          </el-row>
        </el-form>

        <div class="header-content">
          <i class="el-icon-info"></i>
          <span>共{{ total }}条记录</span>
        </div>
      </div>
      <el-table
        :data="tableData"
        style="width: 100%"
        :header-cell-style="{ background: '#f4f4f5' }"
      >
        <el-table-column prop="id" label="序号" align="center">
        </el-table-column>
        <el-table-column prop="number" label="企业编号" align="center">
        </el-table-column>
        <el-table-column prop="shortName" label="企业简称" align="center">
        </el-table-column>
        <el-table-column prop="tags" label="标签" align="center">
        </el-table-column>
        <el-table-column prop="creatorID" label="创建者" align="center">
        </el-table-column>
        <el-table-column prop="addDate" label="创建时间" align="center">
        </el-table-column>
        <el-table-column prop="remarks" label="备注" align="center">
        </el-table-column>
        <el-table-column prop="state" label="状态" align="center">
          <template #default="{ row }">
            <span>{{ row.state ? '启用' : '禁用' }}</span>
          </template>
        </el-table-column>
        <el-table-column label="操作" width="150px" align="center">
          <template #default="{ row }">
            <el-button
              type="primary"
              icon="el-icon-edit"
              circle
              class="edit1"
              @click="openDialog('edit', row.id)"
            ></el-button>
            <el-tooltip
              class="item"
              effect="dark"
              :content="row.state ? '禁用' : '启用'"
              placement="top"
            >
              <el-button
                v-if="row.state"
                type="warning"
                icon="el-icon-close"
                circle
                class="edit3"
                @click="openBox('close', row)"
              ></el-button>
              <el-button
                v-else
                type="success"
                icon="el-icon-check"
                circle
                class="edit4"
                @click="openBox('check', row)"
              ></el-button>
            </el-tooltip>

            <el-button
              type="danger"
              icon="el-icon-delete"
              circle
              class="edit2"
              @click="open(row.id)"
            ></el-button>
          </template>
        </el-table-column>
      </el-table>
      <el-pagination
        background
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="page"
        :page-sizes="[10, 20, 30, 50]"
        :page-size="pagesize"
        :total="total"
        layout="prev,pager, next,sizes, jumper"
      >
      </el-pagination>
    </div>
    <!-- 弹出框 -->
    <CompanysAdd
      :titleType="diologTitle"
      :dialogFormVisible.sync="dialogFormVisible"
      :formBase="formBase"
      @getInit="initTable"
      @clearForm="clearForm"
      ref="company"
    ></CompanysAdd>
  </div>
</template>

<script>
import { list, remove, detail, disabled } from '@/api/hmmm/companys.js'
import CompanysAdd from '../components/companys-add.vue'
import { provinces, citys } from '@/api/hmmm/citys.js'
export default {
  components: {
    CompanysAdd
  },
  data () {
    return {
      input: '',
      tableData: [],
      page: 1,
      pagesize: 10,
      total: 0,
      loading: false,
      formBase: {
        tags: '',
        province: '',
        city: '',
        shortName: '',
        company: '',
        isFamous: true,
        remarks: ''
      },
      form: {
        tags: null,
        province: null,
        city: null,
        shortName: null,
        state: null
      },
      rules: {},
      dialogFormVisible: false,
      titleType: 'add',
      id: '',
      citySelect: {
        province: [],
        cityDate: []
      }
    }
  },

  async created () {
    this.initTable()
    this.getCityData()
  },

  methods: {
    // 清空表单内容
    clearForm () {
      this.formBase = {
        tags: '',
        province: '',
        city: '',
        shortName: '',
        company: '',
        remarks: '',
        isFamous: true
      }
    },
    // 获取省
    getCityData: function () {
      this.citySelect.province = provinces()
    },
    // 选省获取到市
    handleProvince: function (e) {
      this.citySelect.cityDate = citys(e)
      this.form.city = this.citySelect.cityDate[0]
    },
    async initTable () {
      const { data } = await list({
        page: this.page,
        pagesize: this.pagesize,
        tags: this.form.tags,
        province: this.form.province,
        city: this.form.city,
        shortName: this.form.shortName,
        state: this.form.state
      })
      console.log(data)
      data.items = data.items.map(item => {
        item.addDate = this.$moment(item.addDate).format('YYYY-MM-DD hh:mm:ss')
        return item
      })
      this.tableData = data.items
      this.total = data.counts
      console.log(this.tableData)
    },
    // pagesize改变时
    handleSizeChange (val) {
      this.pagesize = val
      this.page = 1
      this.initTable()
    },
    // page改变时
    handleCurrentChange (val) {
      this.page = val
      this.initTable()
    },
    // 清空input
    clearInput () {
      this.form = {
        tags: null,
        province: null,
        city: null,
        shortName: null,
        state: null
      }
      this.initTable()
    },
    // 搜索input
    searchInput () {
      this.initTable()
    },
    // 对话框取消按钮
    closeDialog () {
      this.clearForm()
      this.$refs.form.resetFields()
      this.dialogFormVisible = false
    },

    // 点击新增用户按钮
    async openDialog (type, id) {
      console.log(id)
      if (type !== 'add') {
        const { data } = await detail({ id })
        console.log(data)

        this.formBase.shortName = data.shortName
        this.formBase.company = data.company
        this.formBase.province = data.province
        this.formBase.city = data.city
        this.formBase.tags = data.tags
        this.formBase.remarks = data.remarks
      }
      console.log(this.$refs.company.citySelect.province)
      this.dialogFormVisible = true
    },
    // 启用，禁用
    openBox (type, row) {
      if (type === 'check') {
        this.$confirm('已成功启用, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        })
          .then(async () => {
            row.state = 1
            await disabled(row)
            this.initTable()
            this.$message.success('已成功启用!')
          })
          .catch(() => {
            this.$message.success('已取消操作!')
          })
      } else if (type === 'close') {
        this.$confirm('已成功禁用, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        })
          .then(async () => {
            row.state = 0
            await disabled(row)
            this.initTable()
            this.$message.success('已成功禁用!')
          })
          .catch(() => {
            this.$message.success('已取消操作!')
          })
      }
    },
    // 删除 取消确认按钮
    open (id) {
      this.$confirm('此操作将永久删除用户, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      })
        .then(async () => {
          // 发删除请求
          await remove({ id })
          this.initTable()
          this.$message({
            type: 'success',
            message: '删除成功!'
          })
        })
        .catch(() => {
          this.$message({
            type: 'info',
            message: '已取消操作！'
          })
        })
    }
  },
  computed: {
    diologTitle () {
      if (this.titleType === 'add') {
        return '创建用户'
      } else if (this.titleType === 'edit') {
        return '编辑用户'
      } else {
        return '创建用户'
      }
    }
  }
}
</script>

<style scoped lang="less">
.box-card {
  margin: 20px;
  background-color: #fff;
  padding: 20px;
  .header-content {
    background-color: #f4f4f5;
    color: #909399;
    font-size: 13px;
    padding-left: 8px;
    height: 40px;
    line-height: 40px;
    margin-bottom: 20px;
    .el-icon-info {
      margin-right: 5px;
    }
  }
}
.edit1 {
  color: #409eff;
  background: #ecf5ff;
  border-color: #b3d8ff;
  &:hover {
    background-color: #409eff;
    color: #fff;
  }
}
.edit2 {
  color: #f56c6c;
  background: #fef0f0;
  border-color: #fbc4c4;
  &:hover {
    background-color: #f56c6c;
    color: #fff;
  }
}
.edit3 {
  color: #e6a23c;
  background: #fdf6ec;
  border-color: #f5dab1;
  &:hover {
    background-color: #e6a23c;
    color: #fff;
  }
}
.edit4 {
  color: #67c23a;
  background: #f0f9eb;
  border-color: #c2e7b0;
  &:hover {
    background-color: #67c23a;
    color: #fff;
  }
}
.el-pagination {
  height: 40px;
  display: flex;
  justify-content: flex-end;
  align-items: center;
  padding-top: 20px;
}

.el-dialog {
  .el-form {
    width: 400px;
    margin: auto;
    .el-input {
      width: 310px;
      height: 35px;
    }
  }
  .dialog-footer {
    margin-top: 60px;
    text-align: center;
  }
}
</style>
